<template>
	<view class="page" :style="{ 'min-height': (h - mt) + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar title="开票历史"></c-nav-bar>
		<block v-if="list.length>0">
			<view class="item" v-for="(item, index) in list" :key="index" @tap="toDetails(item)">
				<view class="top">
					<view class="time">{{item.createDate||''}}</view>
					<view class="status">
						<span style="color: #88919D;" v-if="item.status==1">已开票</span>
						<span style="color: #FEB000;" v-else>未开票</span>
						<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
					</view>
				</view>
				<view class="bottom">
					<view class="name">{{item.invoiceName||''}}</view>
					<view class="price">{{item.invoicePrice||''}}<span>元</span></view>
				</view>
			</view>
		</block>
		<block v-else>
			<NoData />
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			h: uni.getSystemInfoSync().windowHeight,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			page: 1,
			limit: 10,
			isOver: false,
			list: []
		}
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		if (this.isOver) return;
		this.getList();
	},
	methods: {
		getList() {
			this.$api.get('/api/isinvoice/page',{
				page:this.page,
				limit:10,
				invoiceType:10,
				openId:JSON.parse(uni.getStorageSync('userInfo')).openId,
				status:''
			}).then(res=>{
				if(res.data.code===0){
					this.page++;
					let { list, total } = res.data.data;
					if (this.list.length + list.length > total || list.length == 0) return this.isOver = true;
					this.list = [...this.list, ...list];
				}else this.$showModal(res.data.msg)
			})
		},
		toDetails(item) {
			uni.navigateTo({
				url: '/pagesMy/invoice/invoiceDetails?id='+item.id
			})
		}
	}
}
</script>

<style scoped lang="less">
.page {
	background: #F5F8FA;
	padding-bottom: 20rpx;

	.item {
		width: 100%;
		background: #fff;
		padding: 36rpx 30rpx 34rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
		.top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.time{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #88919D;
				line-height: 28rpx;
			}
			.status{
				display: flex;
				span{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					line-height: 28rpx;
				}
				image{
					width: 30rpx;
					height: 30rpx;
					margin-left: 12rpx;
				}
			}
		}
		
		.bottom{
			margin-top: 37rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 30rpx;
			}
			.price{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				line-height: 40rpx;
				display: flex;
				span{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
}
</style>